const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var VueLoaderPlugin = require("vue-loader/lib/plugin.js");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    // 打包前入口路径
    entry: './src/main.js',
    // 打包后出口路径
    output: {
        filename: 'index.js',
        path: path.join(__dirname, 'dist')
    },
    // 设置开发模式：‘development’和生产模式：‘production’
    // mode:'development'
    devtool: 'source-map',
    module: {
        rules: [
            // CSS 编译
            {
                test: /\.css$/i,
                use: ["style-loader", {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        esModule: false
                    }
                }, "css-loader"],
            },
            //scss 编译
            {
                test: /\.scss$/,
                use: ['style-loader', {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        esModule: false
                    }
                }, 'css-loader', 'postcss-loader', 'sass-loader'],

            },
            // Less 编译
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            esModule: false
                        }
                    },
                    'css-loader', "postcss-loader", 'less-loader'
                ],
            }, {
                test: /\.js$/,
                // exclude：排除指定目录不需要打包处理
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime']
                    }
                }
            },
            // ES6语法 编译
            // {
            //     test: /\.js$/,
            //     // exclude：排除指定目录不需要打包处理
            //     exclude: /(node_modules|bower_components)/,
            //     use: {
            //         loader: 'babel-loader',
            //         options: {
            //             presets: ['@babel/preset-env']
            //         }
            //     }
            // },
             {
                test: /\.vue$/, use: 'vue-loader'
            }
        ]
    },
    // 服务器热更新
    devServer: {
        //启用热替换
        hot: true,
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        // gzip压缩
        compress: true,
        // 指定端口
        port: 9000,
        // 自动打开浏览器
        open: true,
    },
    // 该插件生成 HTML5 文件
    plugins: [
        new HtmlWebpackPlugin({
            title: "webpack5",
            template: "./public/index.html",  // 以src/目录下的index.html为模板打包
        }),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            // 防止客户端缓存
            filename: "[name]-[hash:8].css",

        })
    ],
    resolve: {
        alias: {
            // 修正vue导的入路径，导入完整的Vue框架
            'vue$': "vue/dist/vue.js",
            '@': path.join(__dirname, 'src'),
            //配置api目录
            '@api': path.join(__dirname, 'src/api'),
            //配置util目录
            '@util': path.join(__dirname, 'src/util'),
        },
        extensions: ['.js', '.vue', '.json']
    },

}